<!-- src/components/GridDraggableResizable.vue -->
<template>
    <Vue3DraggableResizable
            :x="x"
            :y="y"
            :w="currentW"
            :h="currentH"
            :grid="[gridWidth, gridHeight]"
            :parent="parent"
            :resizable="resizable"
            :draggable="draggable"
            class="grid-draggable-item"
            @dragging="handleDragging"
            @drag-end="handleDragEnd"
            @resizing="handleResizing"
            @resize-end="handleResizeEnd"
    >
        <!-- 插槽：对外暴露对齐后的尺寸供内容使用 -->
        <slot :width="currentW" :height="currentH" />
    </Vue3DraggableResizable>
</template>

<script setup>
    import { ref } from 'vue'
    import Vue3DraggableResizable from 'vue3-draggable-resizable'
    import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

    // 外部传入的基础配置参数
    const props = defineProps({
        // 初始位置坐标（像素）
        x: { type: Number, required: true },
        y: { type: Number, required: true },
        // 初始尺寸（像素，组件内部自动对齐栅格）
        initialW: { type: Number, required: true },
        initialH: { type: Number, required: true },
        // 栅格单元尺寸（核心参数，决定吸附粒度）
        gridWidth: { type: Number, required: true },
        gridHeight: { type: Number, required: true },
        // 功能开关
        parent: { type: Boolean, default: true }, // 是否限制在父容器内
        resizable: { type: Boolean, default: true }, // 是否可缩放
        draggable: { type: Boolean, default: true }, // 是否可拖拽
        // 尺寸限制（栅格数）
        minGrids: { type: Number, default: 1 }, // 最小尺寸（1个栅格）
        maxGrids: { type: Number, default: 12 } // 最大尺寸（12个栅格）
    })

    // 内部维护的对齐后尺寸（核心状态）
    const currentW = ref(0)
    const currentH = ref(0)

    // 栅格吸附核心函数（内聚于组件）
    const snapGrid = (value, gridSize) => {
        if (!gridSize) return value
        // 计算当前尺寸对应的栅格数
        const grids = value / gridSize
        const fractionalPart = grids - Math.floor(grids)

        // 超过50%吸附到下一格，否则吸附到当前格
        let snappedGrids = fractionalPart >= 0.5
            ? Math.floor(grids) + 1
            : Math.floor(grids)

        // 限制在最小/最大栅格数范围内
        snappedGrids = Math.max(props.minGrids, Math.min(snappedGrids, props.maxGrids))
        return snappedGrids * gridSize
    }

    // 初始化：首次加载时对齐初始尺寸
    const initSnappedSize = () => {
        currentW.value = snapGrid(props.initialW, props.gridWidth)
        currentH.value = snapGrid(props.initialH, props.gridHeight)
    }
    initSnappedSize()

    // 对外发射的事件（传递最终状态）
    const emit = defineEmits([
        'dragging',    // 拖拽中：{ x, y }
        'drag-end',    // 拖拽结束：{ x, y }
        'resize-end',  // 缩放结束：{ x, y, w, h }
        'size-change'  // 尺寸变化时：{ w, h }
    ])

    // 拖拽中事件处理
    const handleDragging = (position) => {
        emit('dragging', { x: position.x, y: position.y })
    }

    // 拖拽结束事件处理
    const handleDragEnd = (position) => {
        emit('drag-end', { x: position.x, y: position.y })
    }

    // 缩放中事件处理（实时更新内部尺寸）
    const handleResizing = (position) => {
        const tempW = snapGrid(position.w, props.gridWidth)
        const tempH = snapGrid(position.h, props.gridHeight)
        if (tempW !== currentW.value || tempH !== currentH.value) {
            currentW.value = tempW
            currentH.value = tempH
            emit('size-change', { w: tempW, h: tempH })
        }
    }

    // 缩放结束事件处理（确认最终状态并发射）
    const handleResizeEnd = (position) => {
        const finalW = snapGrid(position.w, props.gridWidth)
        const finalH = snapGrid(position.h, props.gridHeight)
        currentW.value = finalW
        currentH.value = finalH
        emit('resize-end', {
            x: position.x,
            y: position.y,
            w: finalW,
            h: finalH
        })
    }

    // 对外暴露内部状态与方法（可选）
    defineExpose({
        getCurrentSize: () => ({ w: currentW.value, h: currentH.value }),
        refreshSnap: initSnappedSize // 重新对齐栅格（如栅格尺寸变化时调用）
    })
</script>

<style scoped>
    .grid-draggable-item {
        border: 2px solid #4489ff;
        border-radius: 6px;
        background: rgba(222, 237, 255, 0.9);
        box-sizing: border-box;
    }

    /* 拖拽/缩放中的状态强化 */
    .grid-draggable-item.vdr-dragging,
    .grid-draggable-item.vdr-resizing {
        z-index: 100;
        border-color: #0d6efd;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        opacity: 0.8;
    }

    /* 隐藏默认缩放手柄的背景（可选优化） */
    .vdr-handle {
        background-color: #fff;
        border: 1px solid #4489ff;
    }
</style>
